<template>
    <div>
        <h1>user</h1>
        <!-- 
            <Suspense>
                <router-view></router-view>
                <template #fallback>
                    loading...
                </template>
            </Suspense> 
        -->
        <router-view v-slot="{ Component, route }">
            <Transition>
               <Suspense>
                    <component :is="Component" :key="route.fullPath"></component>
               </Suspense>
            </Transition>
        </router-view>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.v-enter-from {
    transform: translateX(-100%);
}

.v-enter-to {
    transform: translateX(0%);
}

.v-enter-active {
    transition: all 0.5s linear;
}
</style>